<!--
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8" name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>Welcome to SoroShop · Soro</title>
    <style type="text/css">

        body {
            width: 100%;
            min-width: 1000px;
        }


        header {
            padding: 40px 60px;
        }

        main {
            padding: 10px 60px 40px;
        }



        .logo {
            font-size: 35px;
            font-weight: bold;
        }

        .header_lockup {
            height: 50px;
        }

        .header_item1 {
            display: inline-block;
            padding: 0;
            height: 50px;
        }

        .header_item2 {
            display: inline-block;
            height: 50px;
            width: 800px;
            float: right;
            font-family: 'Lantinghei SC', 'STSong', serif;
            padding-top: 20px;
        }

        .top-list {
            float: right;
        }

        .top-list_item {
            float: left;
            list-style: none;
        }

        a {
            text-decoration: none;
            color: black;
        }

        /*上面是header*/
        /*footer {
            border-top-style: solid;
            border-width: thin;
            height: 100px;
            padding: 40px 60px;
        }*/
        footer {
            -webkit-tap-highlight-color: transparent;
            &#45;&#45;blue: #007bff;
            &#45;&#45;indigo: #6610f2;
            &#45;&#45;purple: #6f42c1;
            &#45;&#45;pink: #e83e8c;
            &#45;&#45;red: #dc3545;
            &#45;&#45;orange: #fd7e14;
            &#45;&#45;yellow: #ffc107;
            &#45;&#45;green: #28a745;
            &#45;&#45;teal: #20c997;
            &#45;&#45;cyan: #17a2b8;
            &#45;&#45;white: #fff;
            &#45;&#45;gray: #6c757d;
            &#45;&#45;gray-dark: #343a40;
            &#45;&#45;primary: #000;
            &#45;&#45;secondary: #6c757d;
            &#45;&#45;success: #28a745;
            &#45;&#45;info: #17a2b8;
            &#45;&#45;warning: #ffc107;
            &#45;&#45;danger: #dc3545;
            &#45;&#45;light: #f8f9fa;
            &#45;&#45;dark: #343a40;
            &#45;&#45;breakpoint-xs: 0;
            &#45;&#45;breakpoint-sm: 576px;
            &#45;&#45;breakpoint-md: 768px;
            &#45;&#45;breakpoint-lg: 992px;
            &#45;&#45;breakpoint-xl: 1200px;
            &#45;&#45;font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            &#45;&#45;font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: block;
            width: 100%;
            margin-right: auto;
            margin-left: auto;
            transition: transform .3s ease-in-out;
            border-top: 1px solid #ededed;
            background-color: #fff;
            letter-spacing: .5px;
            position: relative;
            z-index: 90;
            padding: 50px 60px;
        }

        .d-sm-flex {
            -webkit-tap-highlight-color: transparent;
            &#45;&#45;blue: #007bff;
            &#45;&#45;indigo: #6610f2;
            &#45;&#45;purple: #6f42c1;
            &#45;&#45;pink: #e83e8c;
            &#45;&#45;red: #dc3545;
            &#45;&#45;orange: #fd7e14;
            &#45;&#45;yellow: #ffc107;
            &#45;&#45;green: #28a745;
            &#45;&#45;teal: #20c997;
            &#45;&#45;cyan: #17a2b8;
            &#45;&#45;white: #fff;
            &#45;&#45;gray: #6c757d;
            &#45;&#45;gray-dark: #343a40;
            &#45;&#45;primary: #000;
            &#45;&#45;secondary: #6c757d;
            &#45;&#45;success: #28a745;
            &#45;&#45;info: #17a2b8;
            &#45;&#45;warning: #ffc107;
            &#45;&#45;danger: #dc3545;
            &#45;&#45;light: #f8f9fa;
            &#45;&#45;dark: #343a40;
            &#45;&#45;breakpoint-xs: 0;
            &#45;&#45;breakpoint-sm: 576px;
            &#45;&#45;breakpoint-md: 768px;
            &#45;&#45;breakpoint-lg: 992px;
            &#45;&#45;breakpoint-xl: 1200px;
            &#45;&#45;font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            &#45;&#45;font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: flex!important;
            flex-wrap: nowrap!important;
            justify-content: space-between!important;
        }

        .ps-footer__main {
            -webkit-tap-highlight-color: transparent;
            &#45;&#45;blue: #007bff;
            &#45;&#45;indigo: #6610f2;
            &#45;&#45;purple: #6f42c1;
            &#45;&#45;pink: #e83e8c;
            &#45;&#45;red: #dc3545;
            &#45;&#45;orange: #fd7e14;
            &#45;&#45;yellow: #ffc107;
            &#45;&#45;green: #28a745;
            &#45;&#45;teal: #20c997;
            &#45;&#45;cyan: #17a2b8;
            &#45;&#45;white: #fff;
            &#45;&#45;gray: #6c757d;
            &#45;&#45;gray-dark: #343a40;
            &#45;&#45;primary: #000;
            &#45;&#45;secondary: #6c757d;
            &#45;&#45;success: #28a745;
            &#45;&#45;info: #17a2b8;
            &#45;&#45;warning: #ffc107;
            &#45;&#45;danger: #dc3545;
            &#45;&#45;light: #f8f9fa;
            &#45;&#45;dark: #343a40;
            &#45;&#45;breakpoint-xs: 0;
            &#45;&#45;breakpoint-sm: 576px;
            &#45;&#45;breakpoint-md: 768px;
            &#45;&#45;breakpoint-lg: 992px;
            &#45;&#45;breakpoint-xl: 1200px;
            &#45;&#45;font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            &#45;&#45;font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
        }

        .p-div {
            -webkit-tap-highlight-color: transparent;
            &#45;&#45;blue: #007bff;
            &#45;&#45;indigo: #6610f2;
            &#45;&#45;purple: #6f42c1;
            &#45;&#45;pink: #e83e8c;
            &#45;&#45;red: #dc3545;
            &#45;&#45;orange: #fd7e14;
            &#45;&#45;yellow: #ffc107;
            &#45;&#45;green: #28a745;
            &#45;&#45;teal: #20c997;
            &#45;&#45;cyan: #17a2b8;
            &#45;&#45;white: #fff;
            &#45;&#45;gray: #6c757d;
            &#45;&#45;gray-dark: #343a40;
            &#45;&#45;primary: #000;
            &#45;&#45;secondary: #6c757d;
            &#45;&#45;success: #28a745;
            &#45;&#45;info: #17a2b8;
            &#45;&#45;warning: #ffc107;
            &#45;&#45;danger: #dc3545;
            &#45;&#45;light: #f8f9fa;
            &#45;&#45;dark: #343a40;
            &#45;&#45;breakpoint-xs: 0;
            &#45;&#45;breakpoint-sm: 576px;
            &#45;&#45;breakpoint-md: 768px;
            &#45;&#45;breakpoint-lg: 992px;
            &#45;&#45;breakpoint-xl: 1200px;
            &#45;&#45;font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            &#45;&#45;font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: block;
            min-height: 32px;
            margin-bottom: 30px;
        }

        .p-list {
            -webkit-tap-highlight-color: transparent;
            &#45;&#45;blue: #007bff;
            &#45;&#45;indigo: #6610f2;
            &#45;&#45;purple: #6f42c1;
            &#45;&#45;pink: #e83e8c;
            &#45;&#45;red: #dc3545;
            &#45;&#45;orange: #fd7e14;
            &#45;&#45;yellow: #ffc107;
            &#45;&#45;green: #28a745;
            &#45;&#45;teal: #20c997;
            &#45;&#45;cyan: #17a2b8;
            &#45;&#45;white: #fff;
            &#45;&#45;gray: #6c757d;
            &#45;&#45;gray-dark: #343a40;
            &#45;&#45;primary: #000;
            &#45;&#45;secondary: #6c757d;
            &#45;&#45;success: #28a745;
            &#45;&#45;info: #17a2b8;
            &#45;&#45;warning: #ffc107;
            &#45;&#45;danger: #dc3545;
            &#45;&#45;light: #f8f9fa;
            &#45;&#45;dark: #343a40;
            &#45;&#45;breakpoint-xs: 0;
            &#45;&#45;breakpoint-sm: 576px;
            &#45;&#45;breakpoint-md: 768px;
            &#45;&#45;breakpoint-lg: 992px;
            &#45;&#45;breakpoint-xl: 1200px;
            &#45;&#45;font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            &#45;&#45;font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            align-items: flex-start;
        }

        .p-list__item {
            -webkit-tap-highlight-color: transparent;
            &#45;&#45;blue: #007bff;
            &#45;&#45;indigo: #6610f2;
            &#45;&#45;purple: #6f42c1;
            &#45;&#45;pink: #e83e8c;
            &#45;&#45;red: #dc3545;
            &#45;&#45;orange: #fd7e14;
            &#45;&#45;yellow: #ffc107;
            &#45;&#45;green: #28a745;
            &#45;&#45;teal: #20c997;
            &#45;&#45;cyan: #17a2b8;
            &#45;&#45;white: #fff;
            &#45;&#45;gray: #6c757d;
            &#45;&#45;gray-dark: #343a40;
            &#45;&#45;primary: #000;
            &#45;&#45;secondary: #6c757d;
            &#45;&#45;success: #28a745;
            &#45;&#45;info: #17a2b8;
            &#45;&#45;warning: #ffc107;
            &#45;&#45;danger: #dc3545;
            &#45;&#45;light: #f8f9fa;
            &#45;&#45;dark: #343a40;
            &#45;&#45;breakpoint-xs: 0;
            &#45;&#45;breakpoint-sm: 576px;
            &#45;&#45;breakpoint-md: 768px;
            &#45;&#45;breakpoint-lg: 992px;
            &#45;&#45;breakpoint-xl: 1200px;
            &#45;&#45;font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            &#45;&#45;font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            list-style: none;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            padding: 0 15px;
            white-space: nowrap;
            padding-left: 0;
        }

        .ps-footer__extra {
            padding-right: 35px;
        }



        /*上面是footer*/

        .left-list {
            list-style: none;
            margin: 0;
            padding-left: 0;
        }

        .left-list_item {
            font-weight: bolder;
            font-size: 18px;
            padding-top: 20px;
        }

        .row {
            width: 100%;
        }

        .col1 {
            vertical-align: top;
            display: inline-block;
            padding: 0 110px 0 0;
        }

        .col2 {
            display: inline-block;
            padding: 10px 0;
            background-color: #ecf9ff;
        }

        .row {
            height: 500px;
        }

        .p_item2 div {
            display: inline-block;
        }

        .item-div {
            /*border: 1px solid #1d82ff;*/
            width: 1500px;
        }

        .item-title {
            margin: 0 20px;
            height:20px;
        }

        .item-title-span2 {
            padding-left: 5px;
        }

        .item-title-span3 {
            padding-left: 5px;
        }

        .item-content {
            border-top: 1px solid #17a2b8;
            height: 100px;
        }

        .item-content-username {
            height: 70px;
        }

        .item-content-email {
            height: 80px;
        }

        .item-content-mobile {
            height: 80px;
        }

        .item-content-username-list1 {
            list-style: none;
            height: 30px;
            padding:0 0 0 25px;
            margin: 0;
            border-bottom: 1px solid #d4edf9;
            background-color: lightblue;
        }

        .item-content-username-list1 li {
            float: left;
        }

        .item-content-username-inner1 {
            padding: 5px 10px;
            width: 200px;
        }

        .item-content-username-inner2 {
            padding: 5px 10px;
            width: 200px;
        }

        .item-content-username-list2 {
            list-style: none;
            height: 30px;
            padding:0 0 0 25px;
            margin: 0;
        }

        .item-content-username-list2 li {
            float: left;
        }

    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
    <script></script>
</head>
<body>
<header class="header">
    <div class="header_lockup">
        <div class="header_item1">
            <a class="logo">Soro</a></div>
        <div class="header_item2">
            <ul class="top-list">
                <li class="top-list_item" style="padding-right: 50px"><a href="/">首页</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/shop">产品</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/appointment">上门预约</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/about">关于我们</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/join">注册</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/cart">购物车</a></li>
                <li class="top-list_item" style="margin-right: 30px">
                    <a href="/personal" th:if="${session.username != null}" th:text="${session.username}">用户名</a>
                    <a href="/login" th:if="${session.username == null}">登录</a>
                </li>
                <li class="top-list_item"><a href="/logout" th:if="${session.username != null}">退出</a></li>
            </ul>
        </div>
    </div>
</header>
<main>
    <div class="row">
        <div class="col1">
            <ul class="left-list">
                <li class="left-list_item"><a href="/personal">账号信息</a></li>
                <li class="left-list_item"><a href="/myOrders">商城订单</a></li>
                <li class="left-list_item"><a href="/myAppointments">我的预约</a></li>
            </ul>
        </div>
        <div class="col2">
            <div class="sort-line" style="float: right"><input type="text"><button>搜索</button></div>
            <div class="item-div" th:each="orderMap,orderMapStat:${ordersMap}">
                <div class="item-title"><span>订单号:</span><span class="item-title-span1" th:text="${orderMapStat.current.key}"></span></div>
                <div class="item-content">
                    <div class="item-content-username">
                        <ul class="item-content-username-list1">
                            <li>
                                <div class="item-content-username-inner1">商品名</div>
                            </li>
                            <li>
                                <div class="item-content-username-inner2">商品属性</div>
                            </li>
                            <li>
                                <div class="item-content-username-inner2">单价</div>
                            </li>
                            <li>
                                <div class="item-content-username-inner2">数量</div>
                            </li>
                            <li>
                                <div class="item-content-username-inner2">金额</div>
                            </li>

                        </ul>
                        <div style="height:35px"  th:each="orderItem,orderItemStat:${orderMapStat.current.value}">
                        <ul class="item-content-username-list2">
                            <li>
                                <div class="item-content-username-inner1"><span th:text="${orderItem.getProductName()}">顶级狗粮</span></div>
                            </li>
                            <li>
                                <div class="item-content-username-inner2">
                                    <span th:text="${orderItem.getDetails()}">details</span>
                                </div>
                            </li>
                            <li>
                                <div class="item-content-username-inner2">
                                    <span th:text="${orderItem.getUnitPrice()}">unitPrice</span>
                                </div>
                            </li>
                            <li>
                                <div class="item-content-username-inner2">
                                    <span th:text="${orderItem.getAmount()}">amount</span>
                                </div>
                            </li>
                            <li>
                                <div class="item-content-username-inner2">
                                    <span th:text="${orderItem.getAmount() * orderItem.getUnitPrice()}">details</span>
                                </div>
                            </li>
                        </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<footer class="container-fluid ps-footer p-wrap">
    <div class="ps-header__slogan">美好宠物生活	Live with pet better</div>
    <div class="d-sm-flex justify-content-sm-between flex-nowrap">
        <div class="ps-footer__main">
            <div class="p-div">
            </div>
            <nav class="p-div"><ul class="p-list">
                <li class="p-list__item">
                    <a href="/">首页</a>
                </li>
                <li class="p-list__item">
                    <a href="/shop">产品</a>
                </li>
                <li class="p-list__item">
                    <a href="/appointment">上门预约</a>
                </li>
                <li class="p-list__item">
                    <a href="/about">关于我们</a>
                </li>
                <li class="p-list__item">
                    <a href="/join">注册</a>
                </li>
                <li class="p-list__item">
                    <a href="/cart">购物车</a>
                </li>
                <li class="p-list__item ps-lang">
                    <a href="/personal">个人中心</a>
                </li>
            </ul> </nav>
            <div><a href="http://www.beian.miit.gov.cn" target="_blank">粤ICP备15057691号-2</a> Copyright © 2020 Soro Co.,Ltd. 瘦肉宠物用品（广东）有限公司</div>
        </div>
        <div class=" ps-footer__extra">
            <div class="p-div"></div>
            <div class="p-div"></div>
            <div class="p-div" style="float: bottom">服务热线：+86 400-920-0674<span class="ps-flag"></span></div>
        </div>
    </div>
</footer>
</body>
</html>-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8" name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>Welcome to SoroShop · Soro</title>
    <style type="text/css">

        body {
            width: 100%;
            min-width: 1000px;
        }


        header {
            padding: 40px 60px;
        }

        main {
            padding: 10px 60px 40px;
        }


        .logo {
            font-size: 35px;
            font-weight: bold;
        }

        .header_lockup {
            height: 50px;
        }

        .header_item1 {
            display: inline-block;
            padding: 0;
            height: 50px;
        }

        .header_item2 {
            display: inline-block;
            height: 50px;
            width: 800px;
            float: right;
            font-family: 'Lantinghei SC', 'STSong', serif;
            padding-top: 20px;
        }

        .top-list {
            float: right;
        }

        .top-list_item {
            float: left;
            list-style: none;
        }

        a {
            text-decoration: none;
            color: black;
        }

        /*上面是header*/
        /*footer {
            border-top-style: solid;
            border-width: thin;
            height: 100px;
            padding: 40px 60px;
        }*/
        footer {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: block;
            width: 100%;
            margin-right: auto;
            margin-left: auto;
            transition: transform .3s ease-in-out;
            border-top: 1px solid #ededed;
            background-color: #fff;
            letter-spacing: .5px;
            position: relative;
            z-index: 90;
            padding: 50px 60px;
        }

        .d-sm-flex {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: flex !important;
            flex-wrap: nowrap !important;
            justify-content: space-between !important;
        }

        .ps-footer__main {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
        }

        .p-div {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: block;
            min-height: 32px;
            margin-bottom: 30px;
        }

        .p-list {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            align-items: flex-start;
        }

        .p-list__item {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
            font-weight: 400;
            color: #212529;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            list-style: none;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            padding: 0 15px;
            white-space: nowrap;
            padding-left: 0;
        }

        .ps-footer__extra {
            padding-right: 35px;
        }


        /*上面是footer*/

        .left-list {
            list-style: none;
            margin: 0;
            padding-left: 0;
        }

        .left-list_item {
            font-weight: bolder;
            font-size: 18px;
            padding-top: 20px;
        }

        .row {
            width: 100%;
        }

        .col1 {
            vertical-align: top;
            display: inline-block;
            padding: 0 110px 0 0;
        }

        .col2 {
            display: inline-block;
            padding: 10px 0;
            background-color: #ecf9ff;
        }

        .row {
            height: 500px;
        }

        .p_item2 div {
            display: inline-block;
        }

        .item-div {
            /*border: 1px solid #1d82ff;*/
            width: 1500px;
            border-bottom: dotted;
            border-bottom-color: #17a2b8;
        }

        .item-title {
            margin: 0 20px;
            height: 20px;
        }

        .item-title-span2 {
            padding-left: 5px;
        }

        .item-title-span3 {
            padding-left: 5px;
        }

        .item-content {
            border-top: 1px solid #17a2b8;
            height: 100px;
            width: 1500px;
        }

        .item-content-username {
            height: 70px;
        }

        .item-content-email {
            height: 80px;
        }

        .item-content-mobile {
            height: 80px;
        }

        .item-content-username-list1 {
            list-style: none;
            height: 30px;
            padding: 0 0 0 25px;
            margin: 0;
            border-bottom: 1px solid #d4edf9;
            background-color: lightblue;
        }

        .item-content-username-list1 li {
            float: left;
        }

        .item-content-username-inner1 {
            padding: 5px 10px;
            width: 100px;
        }

        .item-content-username-inner2 {
            padding: 5px 10px;
            width: 200px;
        }

        .item-content-username-list2 {
            list-style: none;
            height: 30px;
            padding: 0 0 0 25px;
            margin: 0;
        }

        .item-content-username-list2 li {
            float: left;
        }

    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
    <script></script>
</head>
<body>
<header class="header">
    <div class="header_lockup">
        <div class="header_item1">
            <a class="logo">Soro</a></div>
        <div class="header_item2">
            <ul class="top-list">
                <li class="top-list_item" style="padding-right: 50px"><a href="/">首页</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/shop">产品</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/appointment">上门预约</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/about">关于我们</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/join">注册</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/cart">购物车</a></li>
                <li class="top-list_item" style="margin-right: 30px">
                    <a href="/personal" th:if="${session.username != null}" th:text="${session.username}">用户名</a>
                    <a href="/login" th:if="${session.username == null}">登录</a>
                </li>
                <li class="top-list_item"><a href="/logout" th:if="${session.username != null}">退出</a></li>
            </ul>
        </div>
    </div>
</header>
<main>
    <div class="row">
        <div class="col1">
            <ul class="left-list">
                <li class="left-list_item"><a href="/personal">账号信息</a></li>
                <li class="left-list_item"><a href="/myOrders">商城订单</a></li>
                <li class="left-list_item"><a href="/myAppointments">我的预约</a></li>
            </ul>
        </div>
        <div class="col2">
            <div class="sort-line" style="float: right"><input type="text">
                <button>搜索</button>
            </div>
            <!--<div class="item-div" th:each="orderMap,orderMapStat:${ordersMap}">-->
            <!--<div class="item-title"><span>订单号:</span><span class="item-title-span1" th:text="${orderMapStat.current.key}"></span></div>-->
            <div class="item-content">
                <div class="item-content-username">
                    <ul class="item-content-username-list1">
                        <li>
                            <div class="item-content-username-inner1">订单号</div>
                        </li>
                        <li>
                            <div class="item-content-username-inner2">商品名</div>
                        </li>
                        <li>
                            <div class="item-content-username-inner2">商品属性</div>
                        </li>
                        <li>
                            <div class="item-content-username-inner1">单价</div>
                        </li>
                        <li>
                            <div class="item-content-username-inner1">数量</div>
                        </li>
                        <li>
                            <div class="item-content-username-inner1">金额</div>
                        </li>

                    </ul>
                    <div class="item-div" th:each="orderMap,orderMapStat:${ordersMap}">
                        <div style="height:35px" th:each="orderItem,orderItemStat:${orderMapStat.current.value}">
                            <ul class="item-content-username-list2">
                                <li>
                                    <div class="item-content-username-inner1"><span
                                            th:text="${orderMapStat.current.key}">114541</span></div>
                                </li>
                                <li>
                                    <div class="item-content-username-inner2"><span
                                            th:text="${orderItem.getProductName()}">顶级狗粮</span></div>
                                </li>
                                <li>
                                    <div class="item-content-username-inner2">
                                        <span th:text="${orderItem.getDetails()}">details</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="item-content-username-inner1">
                                        <span th:text="${orderItem.getUnitPrice()}">unitPrice</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="item-content-username-inner1">
                                        <span th:text="${orderItem.getAmount()}">amount</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="item-content-username-inner1">
                                        <span th:text="${orderItem.getAmount() * orderItem.getUnitPrice()}">details</span>
                                    </div>
                                </li>
                            </ul>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
</main>
<footer class="container-fluid ps-footer p-wrap">
    <div class="ps-header__slogan">美好宠物生活 Live with pet better</div>
    <div class="d-sm-flex justify-content-sm-between flex-nowrap">
        <div class="ps-footer__main">
            <div class="p-div">
            </div>
            <nav class="p-div">
                <ul class="p-list">
                    <li class="p-list__item">
                        <a href="/">首页</a>
                    </li>
                    <li class="p-list__item">
                        <a href="/shop">产品</a>
                    </li>
                    <li class="p-list__item">
                        <a href="/appointment">上门预约</a>
                    </li>
                    <li class="p-list__item">
                        <a href="/about">关于我们</a>
                    </li>
                    <li class="p-list__item">
                        <a href="/join">注册</a>
                    </li>
                    <li class="p-list__item">
                        <a href="/cart">购物车</a>
                    </li>
                    <li class="p-list__item ps-lang">
                        <a href="/personal">个人中心</a>
                    </li>
                </ul>
            </nav>
            <div><a href="http://www.beian.miit.gov.cn" target="_blank">粤ICP备15057691号-2</a> Copyright © 2020 Soro
                Co.,Ltd. 瘦肉宠物用品（广东）有限公司
            </div>
        </div>
        <div class=" ps-footer__extra">
            <div class="p-div"></div>
            <div class="p-div"></div>
            <div class="p-div" style="float: bottom">服务热线：+86 400-920-0674<span class="ps-flag"></span></div>
        </div>
    </div>
</footer>
</body>
</html>